<template lang="html">
  <div class="editor" id="editor" disabled>
  </div>
</template>

<script>
  //import uuidv1 from "uuid/v1"
  import wangEditor from 'wangeditor'
  export default {
    data() {
      return {
        editor: null
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      isClear: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      isClear(val) {
        // 触发清除文本域内容
        if (val) {
          this.editor.txt.clear()
        }
      },
      value: function(value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value)
        }
      }
    },
    mounted() {
      this.init()
      this.editor.txt.html(this.value)
    },
    methods:{
      init(){
        const editor = new wangEditor(`#editor`)
        // 配置 onchange 回调函数，将数据同步到 vue 中
        editor.config.onchange = (newHtml) => {
          this.$emit('change', newHtml)
        }
        editor.config.uploadImgShowBase64 = false
        editor.config.withCredentials = true
        editor.config.uploadFileName = 'file'
        /*editor.config.uploadImgParams = {
          fdSys: 'ljm',
          fdModule: 'common_editor',
          fdSectionId: uuidv1()
        }*/
        editor.config.uploadImgParamsWithUrl = true
        const baseUrl = process.env.VUE_APP_BASE_API
        console.log("test url",baseUrl)
        editor.config.uploadImgServer = baseUrl+'file/handleFile/editorUpload'
        console.log("test url1",editor.config.uploadImgServer)
        // 创建编辑器
        editor.create()
        this.editor = editor
        console.log(this.value)
      }
    },
    beforeDestroy() {
      // 调用销毁 API 对当前编辑器实例进行销毁
      this.editor.destroy()
      this.editor = null
    }
  }
</script>
<style lang="css">
  .editor {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
  }
</style>
